import React, { useState, useEffect } from "react";
import type { MenuProps } from "antd";
import { Menu, Radio, DatePicker, Space, Input, notification } from "antd";
import type { SizeType } from "antd/es/config-provider/SizeContext";
import type { RadioChangeEvent } from "antd";
import { useNavigate, useRoutes } from "react-router-dom";
import "./index.scss";
import { Outlet } from "react-router-dom";
import "dayjs/locale/zh-cn";
import locale from "antd/es/date-picker/locale/zh_CN";
import * as service from "../../../../api/cgg/company";
import "./Flo.scss";
import { AuditOutlined, CloseCircleOutlined } from "@ant-design/icons";
import { Table, Switch } from "antd";
import type { ColumnsType } from "antd/es/table";

interface DataType {
  key: React.Key;
  name: string;
  age: number;
  address: string;
}

const FolFriends = () => {
  const { RangePicker } = DatePicker;
  const { Search } = Input;

  const items: MenuProps["items"] = [
    {
      label: "我的关注",
      key: "/index/cooperate/folfriends/fol",
    },
    {
      label: "已发起关注",
      key: "/index/cooperate/folfriends/folriht",
    },
  ];
  const [current, setCurrent] = useState("mail");
  const history: any = useNavigate();
  const onClick: MenuProps["onClick"] = (e) => {
    console.log("click ", e);
    history(e.key);
    setCurrent(e.key);
  };

  const [size, setSize] = useState<SizeType>("small");

  const onChange = (e: RadioChangeEvent) => {
    setSize(e.target.value);
  };
  const [data, setData] = useState([]);

  useEffect(() => {
    var Workerlist = async () => {
      var res = await service.findAllCompany({ page: 1, limit: 100 });
      console.log(res.data.data);
      res.data.data.records.forEach((item: any, index: any) => {
        item.key = index;
      });
      setData(res.data.data.records);
    };
    Workerlist();
  }, []);
  var handleSerch = async (value: any) => {
    var res = await service.findAllCompanyByCompanyName({
      page: 1,
      limit: 10,
      supplierName: value,
    });
    console.log(res);
    res.data.data.records.forEach((item: any, index: any) => {
      item.key = index;
    });
    setData(res.data.data.records);
  };

  const onSearch = (value: string) => handleSerch(value);

  var flag = async (companyId: any) => {
    console.log(companyId);

    var res = await service.deleteCompany({ companyId });
    if (res.data.code == 200) {
      var newData = JSON.parse(JSON.stringify(data));
      var i: any = newData.findIndex(
        (item: any) => item.companyId == companyId
      );
      if (i != -1) {
        newData.splice(i, 1);
        setData(newData);
      }
      notification.success({ message: "删除成功" });
    } else {
      notification.error({ message: "删除失败" });
    }
  };
  const columns: ColumnsType<DataType> = [
    {
      title: "操作",
      dataIndex: "name",
      render: (_: any, record: any) => (
        <div className="icons ">
          <CloseCircleOutlined
            onClick={() => flag(record.companyId)}
            style={{ fontSize: 20 }}
          />
          <AuditOutlined className="iconstyle" />
        </div>
      ),
    },
    {
      title: "友商名称",
      dataIndex: "companyName",
    },
    {
      title: "统一信用代码",
      dataIndex: "companyCode",
    },
    {
      title: "企业名称",
      dataIndex: "companyCompanyname",
    },
    {
      title: "友商类型",
      dataIndex: "companyType",
    },
    {
      title: "申请状态",
      dataIndex: "address",
      render: () => (
        <Switch
          checkedChildren="开启"
          unCheckedChildren="关闭"
          defaultChecked
        />
      ),
    },
    {
      title: "申请时间",
      dataIndex: "companyTime",
    },
  ];
  const [selectedRowKeys, setSelectedRowKeys] = useState<React.Key[]>([]);
  const onSelectChange = (newSelectedRowKeys: React.Key[]) => {
    console.log("selectedRowKeys changed: ", newSelectedRowKeys);
    setSelectedRowKeys(newSelectedRowKeys);
  };
  const rowSelection = {
    selectedRowKeys,
    onChange: onSelectChange,
  };

  return (
    <div>
      <div className="head">
        <div className="headers_root">
          <Menu
            className="menu"
            onClick={onClick}
            selectedKeys={[current]}
            mode="horizontal"
            items={items}
          />
        </div>
        <div className="radio">
          <Search
            className="search"
            allowClear
            enterButton="搜索"
            onSearch={onSearch}
          />
        </div>
      </div>
      <div>
        <Table
          columns={columns}
          dataSource={data}
          rowSelection={rowSelection}
        />
      </div>
    </div>
  );
};

export default FolFriends;
